<template lang="pug">
  .foot-menu.animated.bounceInUp(
    v-if="getMenuStatus",
    ref="footWrap",
    :class="{'active': getMenuStyleObj}",
    @touchmove="handleDragPrevent")
    Scene
    .foot-menu-ulall
      ul.foot-menu-list.menu-custom
        li.menu-item.omit(
          v-for="(item, index) in getBottomMenu",
          :key="index",
          :content="item.isActive ? item.act_title : item.dis_title",
          @click="handleBtMenu(item)")
          span.menu-icon(:style="getBgColorStyle")
            i.iconfont(v-if="item.isActive", :class="item.active_icon", :style="getColorStyle")
            i.iconfont(v-else, :class="item.icon", :style="getColorStyle")
          p.menu-text.omit(:style="getColorStyle") {{item.title}}
      ul.foot-menu-list.menu-custom
        li.menu-item.omit(@click="showScene")
          span.menu-icon(:style="getBgColorStyle")
            i.iconfont.icon-scene(:style="getColorStyle")
          p.menu-text.omit(:style="getColorStyle") 场景

        li.menu-item.omit(@click="handleSettings")
          span.menu-icon(:style="getBgColorStyle")
            i.iconfont.icon-settings(:style="getColorStyle")
          p.menu-text.omit(:style="getColorStyle") 操作
          //- (:style="getBgColorStyle")
    van-action-sheet(v-model="sheets", :actions="actions", @cancel="sheetCancel", cancel-text="取消")
</template>

<script>
import { filterMenu } from '@/utils/menu'
import themeMixin from '@/mixins/theme'
import menuMixin from '@/mixins/menu'
import Scene from 'Comps/Scene/app/scene-xc'
import { mapGetters } from 'vuex'
export default {
  name: 'menuBar',
  mixins: [themeMixin, menuMixin],
  data() {
    return {
      countUnit: 10000
    }
  },
  computed: {
    ...mapGetters([
      'praiseCount'
    ]),
    getPraiseCount() {
      return this.praiseCount > this.countUnit
        ? Number(this.praiseCount/this.countUnit).toFixed(1) + 'w'
        : this.praiseCount
          ? this.praiseCount
          : 0
    },
  },
  async mounted() {
    this.menuDataList = await filterMenu(this.$CONFIG.defMenu)
  },
  methods: {
    showBottomMenu() {
      this.formatActions(this.getBottomMenu, this.handleBtMenu)
      this.handleSheet()
    },
    handleSettings() {
      this.formatActions(this.menuDataList, this.handleSytemMenuItem)
      this.handleSheet()
    },
  },
  components: {
    Scene
  }
}
</script>

<style lang="stylus">
@import '../../../assets/styles/mixin.styl'
$white = #fff
$theme-classic-color = #58B7FF
$theme-classic-color-active = #0e94ff
.theme-app-copya
  .foot-menu
    .foot-menu-ulall
      display flex
      justify-content space-between
      background-color #000000
      .foot-menu-list
        flex-cnter()
        padding: 10px 0
        box-sizing: border-box
        color: #fff
        .menu-item
          flex: 1
          max-width: 46px
          align-self: center
          display: inline-block
          text-align: center
          cursor: pointer
          .menu-text
            font-size: 10px
            margin-top: 5px
          .menu-icon
            display: inline-block
            width: 28px
            height: 28px
            line-height: 28px
            border-radius: 50%
            transition: all 1s
            // background-color: $white
            i
              // color: $theme-classic-color
              vertical-align: middle
      .foot-menu-list:nth-child(1)
        width 80%
        justify-content flex-start
      .foot-menu-list:nth-child(2)
        width 20%
        justify-content flex-end
</style>
